<template>
  <div class="road-pre-setting">
    <div class="panel-inner">
      <div class="panel-handler" @click="emits('update:visible', false)">
        <SvgIcon icon-class="ic_关闭" />
      </div>
      <div class="panel">
        <div class="panel-header">图层设置</div>
        <div class="panel-body">
          <el-form v-bind="$attrs">
            <el-form-item label="样式">
              <div class="row-item">
                <div class="icon-wrap">
                  <img
                    class="icon"
                    :src="formData.imageUrl"
                    alt=""
                    @click="choosePicVisible = true"
                  />
                </div>
              </div>
            </el-form-item>
            <!-- <el-form-item label="高度">
              <div class="row-item">
                <el-input-number
                  v-model="formData.height"
                  placeholder=""
                  :controls="false"
                  @change="handleChange"
                />
                <div class="unit">米</div>
              </div>
            </el-form-item> -->
            <el-form-item label="宽度">
              <div class="row-item">
                <el-input-number
                  v-model="formData.lineWidth"
                  placeholder=""
                  :controls="false"
                  @change="handleChange"
                />
                <div class="unit">米</div>
              </div>
            </el-form-item>
            <el-form-item label="流速">
              <div class="row-item">
                <el-input-number
                  v-model="formData.duration"
                  placeholder=""
                  :controls="false"
                  @change="handleChange"
                />
                <div class="unit"></div>
              </div>
            </el-form-item>
            <el-form-item label="颜色">
              <el-color-picker v-model="formData.lineColor" @change="handleChange" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>

  <!-- 插入图片 -->
  <ChoosePic
    v-if="choosePicVisible"
    v-model="choosePicVisible"
    :eff-type="7"
    @close-handle="choosePicClose"
    @sel-pic="picChange"
  />
</template>

<script setup lang="ts">
import { retFilePath } from '@/utils';
import { ElMessage } from 'element-plus';
import { CommonUploadResp } from '@/api/common/types';
import { commonUpload } from '@/api/common';
import ChoosePic from '@/components/choose-pic.vue';

defineOptions({
  name: 'RoadPreSetting',
});

interface IProps {
  form: any;
  visible: boolean;
}

const props = withDefaults(defineProps<IProps>(), {
  form: {},
  visible: false,
});

const emits = defineEmits(['update:form', 'update:visible']);
const choosePicVisible = ref<boolean>(false);

const formData = ref({ ...props.form });

const handleBeforeUpload = async (file: any) => {
  if (!file) {
    return;
  }
  const fileSuffix = file.name.substring(file.name.lastIndexOf('.'));
  if (!['.jpg', '.png'].includes(fileSuffix)) {
    ElMessage.warning('文件格式错误');
    return false;
  }
  if (file.size / 1024 / 1024 / 1024 > 50) {
    ElMessage.warning('文件大小不能超过50G');
    return false;
  }

  const res: CommonUploadResp = await commonUpload(file);
  const imageUrl = retFilePath(res.files[0].refAddress!);
  formData.value.imageUrl = imageUrl;
  handleChange();
  return false;
};

const handleChange = () => {
  emits('update:form', formData.value);
};

function choosePicClose() {
  choosePicVisible.value = false;
}

function picChange(src: string) {
  choosePicClose();
  formData.value.imageUrl = src;
  handleChange();
}

watch(
  () => props.form,
  () => {
    formData.value = { ...props.form };
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.el-form {
  &-item {
    .row-item {
      width: 100%;
      display: flex;
      margin-bottom: 10px;
      .title {
        flex: 0 0 40px;
      }
      .el-input {
        flex: 1;
      }
      .unit {
        flex: 0 0 24px;
        text-align: center;
      }
      .icon-wrap {
        width: 98px;
        height: 82px;
        background: #202329;
        border-radius: 8px;
        .icon {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      &:last-child {
        margin-bottom: 0px;
      }
    }
  }
}

.road-pre-setting {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 30px;
  width: 336px;
  background: #0a0b0d;
  transition: left 0.4s ease-out;
  .panel-inner {
    position: relative;
    height: 100%;
    .panel-handler {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      font-size: 18px;
      border-radius: 4px;
      background: var(--el-color-primary);
      cursor: pointer;
    }
    .panel {
      height: 100%;
      overflow-y: auto;
      .panel-header {
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        text-align: center;
        background: #2e343c;
      }

      .panel-body {
        padding: 20px;
        display: flex;
        height: calc(100% - 28px);
      }
    }
  }
}
</style>
